<template>
  <div class="container">
    <Header @bell-click="handleBellClick" @shift-click="showHandoverDialog = true" />
    <div class="top">
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/ysje.png" alt="" />
          <div class="item-label">订单金额</div>
        </div>
        <div class="item-right">
          <span class="item-num">{{ topHeadData.headContract }}</span>
          <span class="item-unit">万元</span>
        </div>
      </div>

      <!-- <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/hkje.png" alt="" />
          <div class="item-label">回款金额</div>
        </div>
        <div class="item-right">
          <span class="item-num">{{ topHeadData.headPayment }}</span>
          <span class="item-unit">万元</span>
        </div>

      </div> -->
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/yhsl.png" alt="" />
          <div class="item-label">注册用户数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">{{ topHeadData.headUserNum }}</span>
          <span class="item-unit">个</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/sjsl.png" alt="" />
          <div class="item-label">注册商家数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">{{ topHeadData.headShopNum }}</span>
          <span class="item-unit">个</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/skusl.png" alt="" />
          <div class="item-label">SKU数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">{{ topHeadData.headSkuNum }}</span>
          <span class="item-unit">个</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="item-1">
        <div class="tab-box">业绩达成</div>
        <div class="radio-chart-box">
          <div class="native-select-wrapper">
            <select v-model="dimension" class="native-select" @change="handleDimension">
              <option value="month">月度</option>
              <option value="season">季度</option>
              <option value="year">年度</option>
            </select>
          </div>
          <VChart :options="radioChartOptions" />
        </div>

        <div class="check-box">
          <div class="native-select-wrapper">
            <select v-model="ratio" class="native-select" @change="handleRatio">
              <option value="month">月度</option>
              <option value="season">季度</option>
            </select>
          </div>
        </div>
        <div class="report-chart-box">
          <VChart :options="reportChartOptions" />
        </div>
      </div>
      <div class="item-2">
        <div class="tab-box" style="width: 50%">市场覆盖</div>
        <div class="tabs">
          <div
            v-for="tab in tabs2"
            :key="tab"
            class="tab-item"
            :class="{ active: activeTab2 === tab }"
            @click="handleTabClick2(tab)"
          >
            {{ tab }}
          </div>
        </div>
        <div class="map-chart-box">
          <ChinaMap :geoJson="GeoJson" :deData="deData" />
        </div>
      </div>
      <div class="item-3">
        <div class="tab-box">每月新增客户量统计</div>
        <div class="add-chart-box">
          <VChart :options="addNewCustomerChartOptions" />
        </div>

        <div class="tab-box">新增供应商数量统计</div>
        <div class="add-chart-box">
          <VChart :options="addNewSupplierChartOptions" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import Header from '@/components/Header.vue'
import ChinaMap from '@/components/ChinaMap.vue'
import { GeoJson } from '@/assets/geoJson'
import * as ReportApi from '@/api/index'
import {
  initRadioChartOptions,
  initReportChartOptions,
  initAddNewCustomerChartOptions,
  initAddNewSupplierChartOptions,
} from '@/views/index'
const dimension = ref('month')
const handleDimension = async (val) => {
  dimension.value = val?.target?.value
  getLeft({ dimension: val?.target?.value ? val?.target?.value : 'month' })
}

const ratio = ref('month')
const handleRatio = (val) => {
  ratio.value = val?.target?.value

  getLeft2({ dimension: val?.target?.value ? val?.target?.value : 'month' })
}
const deData = ref({
  mapData: [],
  type: 0,
})
const topHeadData = reactive({
  headPayment: 0,
  headContract: 0,
  headRevenue: 0,
  headUserNum: 0,
  headSkuNum: 0,
  headShopNum: 0,
})
const activeTab2 = ref('成交额')
const tabs2 = ['成交额', '用户数']

const radioChartOptions = ref(initRadioChartOptions(0))
const reportChartOptions = ref(initReportChartOptions())
// 每月新增客户量统计
const addNewCustomerChartOptions = ref(initAddNewCustomerChartOptions())
// 新增供应商数量统计
const addNewSupplierChartOptions = ref(initAddNewSupplierChartOptions())

async function handleTabClick2(tab) {
  debugger
  activeTab2.value = tab
  if (tab == '用户数') {
    let data = await ReportApi.centralUserNum({})
    let d = { type: 1, mapData: data.data }

    deData.value = d
  } else {
    let data = await ReportApi.centralRevenue({})
    let d = { type: 0, mapData: data.data }
    deData.value = d
  }
}
/** 上 */
const getHead = async () => {
  let data = await ReportApi.getHead({})
  topHeadData.headContract = data.headContract
  topHeadData.headRevenue = data.headRevenue
  topHeadData.headUserNum = data.headUserNum
  topHeadData.headShopNum = data.headShopNum

  topHeadData.headSkuNum = data.headSkuNum
}

const getLeft = async (param) => {
  let data = await ReportApi.leftRevenue(param)
  console.log(`output->data`, data)
  radioChartOptions.value = initRadioChartOptions(data.data)
}

const getLeft2 = async (param) => {
  let data = await ReportApi.left2Revenue(param)
  reportChartOptions.value = initReportChartOptions(data)
}

const getCentral = async (param) => {
  let data = await ReportApi.centralRevenue({})
  let d = { type: 0, mapData: data.data }
  deData.value = d
}
const getRight = async (param) => {
  let data = await ReportApi.rightUser({ param })
  addNewCustomerChartOptions.value = initAddNewCustomerChartOptions(data)
  data = await ReportApi.rightShop({ param })
  addNewSupplierChartOptions.value = initAddNewSupplierChartOptions(data)
}
/** 初始化 **/
onMounted(() => {
  getHead()
  getLeft({})
  getLeft2({})
  getCentral({})
  getRight({})
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  background-image:
    url('../assets/images/top_bg.png'), url('../assets/images/bottom_bg.png'),
    url('../assets/images/left_bg.png'), url('../assets/images/right_bg.png'),
    url('../assets/images/base_bg.png');
  background-position:
    center top,
    center bottom,
    left center,
    right center,
    center center;
  background-repeat: no-repeat;
  background-size:
    100% 10%,
    100% 10%,
    20% 100%,
    20% 100%,
    100% 100%;
  width: 100vw;
  height: 100vh;
  padding: 1vh 1.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .top {
    margin-top: 10vh;
    width: 100vw;
    height: 19vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh 1.5vw;
    box-sizing: border-box;
    margin-bottom: 2vh;

    .item {
      position: relative;
      width: 24%;
      height: 19vh;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;
      overflow: hidden;
      padding: 1vh 1.5vw;
      display: flex;

      .item-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 100%;
        width: 50%;

        .item-left-img {
          padding: 10%;
          width: 100%;
          height: 80%;
        }
      }

      .item-right {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1vh;
        align-items: center;
        position: relative;
        height: 100%;
      }

      .item-num {
        font-family: 'Digital', monospace;
        font-size: 1.8vw;
        color: #5ecbff;
        margin-left: 1vw;
        letter-spacing: 2px;
      }

      .item-unit {
        font-size: 1.2vw;
        color: #fff;
        margin-left: 0.5vw;
        align-self: center;
        font-family: DOUYU, serif;
      }

      .item-label {
        position: absolute;
        bottom: 0vw;
        font-size: 1.3vw;
        color: #fff;
        font-family: DOUYU, serif;
        letter-spacing: 2px;
        text-shadow: 0 0 4px #000;
      }
    }
  }

  .bottom {
    width: 100vw;
    height: 65vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5vw;
    gap: 0.5vw;
    box-sizing: border-box;
    // background-color: hotpink;

    .item-1 {
      width: 25%;
      height: 100%;
      padding: 2vh 1.5vw 1vh;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;

      // .radio-box {
      //   display: flex;
      //   align-items: center;
      //   justify-content: space-between;
      //   width: 100%;
      //   height: 6vh;

      //   .radio-label {
      //     padding-left: 2vw;
      //     font-size: 1.25vw;
      //     font-family: DOUYU, serif;
      //     color: #fff;
      //   }

      .native-select-wrapper {
        pointer-events: auto;
        width: 6vw;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #00a0e9;
          pointer-events: auto;
        }

        .native-select {
          width: 100%;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background-color: rgba(0, 49, 80, 0.8);
          color: #fff;
          padding: 6px 30px 6px 10px;
          border: 1px solid #00a0e9;
          border-radius: 4px;
          font-size: 0.7vw;
          cursor: pointer;
          outline: none;
          box-sizing: border-box;
          font-size: 0.73vw;

          &:hover {
            border-color: #00c1de;
          }

          &:focus {
            border-color: #00c1de;
            box-shadow: 0 0 0 2px rgba(0, 193, 222, 0.2);
          }

          option {
            background-color: #001a33;
            color: #fff;
            padding: 8px;
          }
        }
      }
    }
    .check-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 45%;

        .btn {
          width: 32%;
        }
      }
      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 32%;

        .btn {
          width: 47%;
        }
      }

      .btn {
        background-color: #e9e9e9;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
      }
      .btn-active {
        background-color: #fd9900;
        color: #fff;
      }
    }

    .radio-chart-box {
      position: relative;
      width: 100%;
      height: 20vh;
      // background-color: hotpink;

      .native-select-wrapper {
        position: absolute;
        top: 1vh;
        left: 0;
        width: 6vw;
        pointer-events: auto;
        z-index: 100;
      }
    }

    .report-chart-box {
      width: 100%;
      height: 33vh;
      // background: hotpink;
    }
  }
  .item-2 {
    width: 50%;
    height: 100%;
    padding: 1vh 1.5vw;
    background: rgba(20, 40, 80, 0.7);
    border-radius: 10px;
    box-shadow:
      0 0 10px #00eaff,
      0 0 0 1px #00eaff inset;

    .map-chart-box {
      width: 100%;
      height: 52vh;
      // background-color: hotpink;
    }
  }

  .item-3 {
    width: 25%;
    height: 100%;
    padding: 1vh 1.5vw;
    background: rgba(20, 40, 80, 0.7);
    border-radius: 10px;
    box-shadow:
      0 0 10px #00eaff,
      0 0 0 1px #00eaff inset;

    .tab-box {
      margin-top: 1vh;
    }

    .add-chart-box {
      width: 100%;
      height: 25vh;
    }
  }
}

.tabs {
  display: flex;
  width: 35%;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 0.5vh 0;
    margin: 0.5vh 0;
    color: #fff;
    font-size: 1.2vw;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: linear-gradient(180deg, #0a2342 0%, #174a6e 100%);
    transition:
      background 0.2s,
      color 0.2s;
    font-family: DOUYU, serif;

    &.active {
      color: #00eaff;
      border-bottom: 2px solid #00eaff;
      background: rgba(0, 234, 255, 0.1);
    }
  }
}

.tab-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 5vh;
  font-family: DOUYU, serif;
  background: url('../assets/images/name_bg.png');
  background-size: 100% 100%;
  color: #fff;
  font-size: 1.2vw;
  margin: auto;
  letter-spacing: 2px;
}
</style>
